<template>
  <div>
    <div class="flex-justify-start pad-all-10 pad-btm-0 flex-gap-10 wrap">
      <el-select
        v-model="categoryGroup"
        size="mini" class="width-input"
        filterable
        clearable
        placeholder="请选择组件分类"
        @change="headerCategoryCommand"
        style="width: 48%"
      >
        <el-option
          label="复合组件" value="componentComposite"></el-option>
        <el-option
          label="设备组件" value="componentDevice"></el-option>
      </el-select>
      <el-select
        v-model="componentCategory"
        size="mini" class="width-input"
        filterable
        clearable
        placeholder="请选择组件功能"
        @change="initData"
        style="width: 48%"
      >
        <el-option
          label="常规功能" value="container"></el-option>
        <el-option
          label="一键入会" value="meetingList"></el-option>
        <el-option
          v-for="(item, index) in deviceTypeData" :key="index"
          :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-select
        v-model="group"
        size="mini" class="width-input"
        filterable
        clearable
        placeholder="请选择组件分组"
        style="width: 48%"
        @change="headerMoreOptCommand"
      >
        <el-option
          label="正式组件" value="formal"></el-option>
        <el-option
          label="测试组件" value="test"></el-option>
      </el-select>

    </div>
    <div v-if="componentList.length" class="component-picker-container">
      <div v-loading="componentLoad" class="width-100 height-100">
        <div
          v-for="(component, idx) in componentList" :key="idx"
          :draggable="true" class="component-picker-content"
          @dragstart="dragStart(component)"
          @dragend="dragEnd">
          <el-popover :disabled="disablePopper" :open-delay="300" :close-delay="200" placement="right" trigger="hover">
            <div>
              <el-image
                v-if="previewImage(component)"
                :src="previewImage(component)"
                class="widget-preview-image" fit="contain"></el-image>
              <span v-else>{{component.name}}</span>
            </div>
            <div slot="reference">
              <!--组合/设备/布局组件-->
              <div class="component-picker-item">
                <div class="font-size-12 font-weight-bold">{{component.name}}</div>
              </div>
            </div>
          </el-popover>
        </div>
      </div>
    </div>
    <div v-else class="mar-top-20">
      <EmptyContent :min-height="150" :image-size="120" empty-text="暂无可用组件"></EmptyContent>
    </div>

  </div>
</template>

<script>
  import {assetBaseUrl} from "@/config/env";
  import {mapActions} from 'vuex';
  import API from "@/api";
  import EmptyContent from "@/components/IDE/EmptyContent.vue";

  export default {
    name: 'AsideComponentPicker',
    components: {
      EmptyContent
    },
    props: {
      widgetType: {
        type: String,
        default: 'atom'
      }
    },
    data() {
      return {
        componentList: [],
        disablePopper: false,
        componentLoad: true,
        group: 'formal',
        componentCategory: 'container',
        deviceTypeData: [],
        categoryGroup: 'componentComposite'
      };
    },
    computed: {
      previewImage() {
        return (component = {}) => {
          const {previewImages = []} = component;
          if (previewImages.length) {
            const image = previewImages[0];
            const {filePath = ''} = image;
            return `${assetBaseUrl}/file/download/${filePath}`;
          }
          return false;
        };
      }
    },
    mounted() {
      this.initData();
      this.getDeviceTypeData()
    },
    methods: {
      ...mapActions(['updateDraggingWidget']),
      initData() {
        switch (this.widgetType) {
          case 'layout':
            break;
          case 'composite':
          case 'molecule':
            this.getCompositeComponents(this.categoryGroup);
            break;
          case 'device':
            this.getCompositeComponents('componentDevice');
            break;
          default:
            break;
        }
      },
      getCompositeComponents(type) {
        this.componentLoad = true
        // type: componentList/componentReleaseList
        const params = {
          "pageNo": 1,
          "pageSize": 100,
          "selector": {type: type, isWidget: {$ne: true}, status:2, group: this.group, category: this.componentCategory}
        };
        API.component.componentList(params).then(result => {
          const {data = [], total = 0} = result;
          this.componentList = data.map(d => {
            return {
              ...d,
              type: type,
              label: d.name,
              span: 1,
              group: this.group
            }
          });
          this.componentLoad = false
        }).catch(err => {
          console.log('err', err)
          this.componentLoad = false
        });
      },
      dragStart(widget) {
        this.disablePopper = true;
        this.updateDraggingWidget(widget);
      },
      dragEnd() {
        this.disablePopper = false;
        this.updateDraggingWidget(undefined);
      },
      headerMoreOptCommand(group) {
        this.group = group;
        this.initData();
      },
      headerCategoryCommand(category) {
        this.getCompositeComponents(category);
      },
      getDeviceTypeData() {
        API.deviceType.deviceTypeAll().then(result => {
          const {data = []} = result;
          this.deviceTypeData = data;
        }).catch(err => {
          console.log('err', err)
        });
      },
    }
  };
</script>

<style scoped lang="less">
  .component-picker-container {
    width: 100%;
    padding: 10px;
    overflow: hidden;

    .component-picker-content {
      position: relative;
      height: 40px;
      margin: 3px;
      width: 100%;
      background: #F0F1F5;
      border: 1px #F0F1F5 solid;
      border-radius: 4px;
      cursor: all-scroll;

      &:hover {
        border: 1px @colorPrimary dashed;
      }

      .component-picker-item {
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    /deep/ .el-progress-bar__outer {
      background: #DADCE5 !important;
    }
  }

  .widget-preview-image {
    width: 200px;
    height: 200px;
    border-radius: 4px;
    border: 1px solid #eee;
  }

  .refresh {
    font-size: 12px;
    color: #2d69e0;
    text-align: right;
    margin-top: 0;
    cursor: pointer;
    margin-bottom: 0;
  }

  .info-opt {
    padding: 10px;
    cursor: pointer;
  }

  .info-opt:hover {
    background: @colorGray96;
    color: @colorPrimary;
  }

  .width-input {
    width: 100%;

    /deep/ .el-input__inner {
      background: #F7F8FA;
    }
  }
  .wrap{
    flex-wrap: wrap;
  }

</style>
